<template>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 py-2 gap-4 md:gap-2 gva-container2">
      <gva-card title="" custom-class="col-span-1 md:col-span-2 lg:col-span-4 row-span-2">
        <gva-chart :type="9" />
      </gva-card>
      <!-- <gva-card title="使用频次" custom-class="col-span-1 md:col-span-2 md:row-start-2 lg:col-span-6 col-start-1 row-span-2">
        <gva-chart :type="5" />
      </gva-card> -->
      <div class="col-span-1 lg:col-span-4 flex flex-wrap gap-4">
        <gva-card custom-class="flex-1 h-250">
          <gva-chart :type="5" title="使用频次" />
        </gva-card>
        <gva-card custom-class="flex-1 h-250">
          <gva-chart :type="6" title="占用空间" />
        </gva-card>
      </div>
  
     <div class="col-span-1 lg:col-span-4 flex flex-wrap gap-4">
        <!-- 包裹为垂直排列 -->
          <gva-card title="分享次数前十" custom-class="flex-1 h-42">
            <gva-chart :type="10" />
          </gva-card>
          <div class="flex flex-col flex-1 gap-4"> 
          <gva-card title="数据统计" custom-class="flex-1 h-42">
            <gva-chart :type="7" />
          </gva-card>
        
        <gva-card title="充值列表" custom-class="flex-1 h-full"> <!-- 高度自适应 -->
          <gva-chart :type="11" />
        </gva-card>
      </div>
      </div>
  
    </div>
  </template>
  
  <script setup>
  import { GvaPluginTable,GvaTable, GvaChart, GvaWiki , GvaNotice , GvaQuickLink , GvaCard , GvaBanner } from "./componenst"
  </script>
  
  <style lang="scss" scoped>
  .h-250{
    height: 250px;
  }
  </style>
  